<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>vue element 定义多种主题实现换肤 | 仲灏小栈</title>
    <meta name="generator" content="VuePress 1.8.0">
    <link rel="icon" href="/img/favicon.ico">
    <meta name="description" content="专注web全栈学习与总结。JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github等技术文章。">
    <meta name="keywords" content="前端博客,个人技术博客,前端,前端开发,前端框架,web前端,前端面试题,技术文档,学习,面试,JavaScript,js,ES6,TypeScript,vue,python,css3,html5,Node,git,github,markdown">
    <meta name="baidu-site-verification" content="code-5CGlqw1B4p">
    <meta name="google-site-verification" content="PbO8RiLRwDnNwqNFNGnaxZnEFB3CqcGMCGoloYfQXV0">
    <meta name="theme-color" content="#11a8cd">
    
    <link rel="preload" href="/assets/css/0.styles.15972595.css" as="style"><link rel="preload" href="/assets/js/app.2005d9cf.js" as="script"><link rel="preload" href="/assets/js/2.26fadcea.js" as="script"><link rel="preload" href="/assets/js/41.644d2886.js" as="script"><link rel="prefetch" href="/assets/js/10.0a7a4ca4.js"><link rel="prefetch" href="/assets/js/100.3309ce28.js"><link rel="prefetch" href="/assets/js/101.ac045b1a.js"><link rel="prefetch" href="/assets/js/102.e80bc311.js"><link rel="prefetch" href="/assets/js/103.bf660db8.js"><link rel="prefetch" href="/assets/js/104.b26aecd4.js"><link rel="prefetch" href="/assets/js/105.0e9ab80d.js"><link rel="prefetch" href="/assets/js/106.b590426c.js"><link rel="prefetch" href="/assets/js/107.5bf74c11.js"><link rel="prefetch" href="/assets/js/108.ffdc48f3.js"><link rel="prefetch" href="/assets/js/109.8da9360f.js"><link rel="prefetch" href="/assets/js/11.d9ff276d.js"><link rel="prefetch" href="/assets/js/110.3986bd59.js"><link rel="prefetch" href="/assets/js/111.1522ded7.js"><link rel="prefetch" href="/assets/js/12.1fe7afa3.js"><link rel="prefetch" href="/assets/js/13.5e3a6c9a.js"><link rel="prefetch" href="/assets/js/14.541bbe3d.js"><link rel="prefetch" href="/assets/js/15.f7a50163.js"><link rel="prefetch" href="/assets/js/16.2f792024.js"><link rel="prefetch" href="/assets/js/17.a1b6c76e.js"><link rel="prefetch" href="/assets/js/18.44579087.js"><link rel="prefetch" href="/assets/js/19.4ea5fdf4.js"><link rel="prefetch" href="/assets/js/20.e975ae71.js"><link rel="prefetch" href="/assets/js/21.8f6a653b.js"><link rel="prefetch" href="/assets/js/22.f7fe055a.js"><link rel="prefetch" href="/assets/js/23.e404dad6.js"><link rel="prefetch" href="/assets/js/24.fe3bc22e.js"><link rel="prefetch" href="/assets/js/25.85d2cc13.js"><link rel="prefetch" href="/assets/js/26.9f14e07f.js"><link rel="prefetch" href="/assets/js/27.d49bdf6c.js"><link rel="prefetch" href="/assets/js/28.72ba52cd.js"><link rel="prefetch" href="/assets/js/29.2e392833.js"><link rel="prefetch" href="/assets/js/3.7675493a.js"><link rel="prefetch" href="/assets/js/30.b69d63e5.js"><link rel="prefetch" href="/assets/js/31.c99d1817.js"><link rel="prefetch" href="/assets/js/32.6d83d1c4.js"><link rel="prefetch" href="/assets/js/33.bebcb9b5.js"><link rel="prefetch" href="/assets/js/34.8f621c93.js"><link rel="prefetch" href="/assets/js/35.6606e0ad.js"><link rel="prefetch" href="/assets/js/36.75614371.js"><link rel="prefetch" href="/assets/js/37.4ce9e497.js"><link rel="prefetch" href="/assets/js/38.95263d32.js"><link rel="prefetch" href="/assets/js/39.a86d2616.js"><link rel="prefetch" href="/assets/js/4.d95386e0.js"><link rel="prefetch" href="/assets/js/40.e7f88f7e.js"><link rel="prefetch" href="/assets/js/42.a9398322.js"><link rel="prefetch" href="/assets/js/43.50ffced2.js"><link rel="prefetch" href="/assets/js/44.8a76f778.js"><link rel="prefetch" href="/assets/js/45.d825d0e7.js"><link rel="prefetch" href="/assets/js/46.e692b0d4.js"><link rel="prefetch" href="/assets/js/47.4a5600e2.js"><link rel="prefetch" href="/assets/js/48.b58a480d.js"><link rel="prefetch" href="/assets/js/49.c31716d2.js"><link rel="prefetch" href="/assets/js/5.77e36999.js"><link rel="prefetch" href="/assets/js/50.5c5f704f.js"><link rel="prefetch" href="/assets/js/51.3b090e9a.js"><link rel="prefetch" href="/assets/js/52.a2846fa7.js"><link rel="prefetch" href="/assets/js/53.08563d97.js"><link rel="prefetch" href="/assets/js/54.abaa1adf.js"><link rel="prefetch" href="/assets/js/55.79ddef5b.js"><link rel="prefetch" href="/assets/js/56.8fc21a8e.js"><link rel="prefetch" href="/assets/js/57.a7a7e91e.js"><link rel="prefetch" href="/assets/js/58.395fd83e.js"><link rel="prefetch" href="/assets/js/59.b2899c75.js"><link rel="prefetch" href="/assets/js/6.ed7c7deb.js"><link rel="prefetch" href="/assets/js/60.12cf70af.js"><link rel="prefetch" href="/assets/js/61.bbb7862b.js"><link rel="prefetch" href="/assets/js/62.ec59ffa8.js"><link rel="prefetch" href="/assets/js/63.f4d6c257.js"><link rel="prefetch" href="/assets/js/64.9e382220.js"><link rel="prefetch" href="/assets/js/65.94ab71cc.js"><link rel="prefetch" href="/assets/js/66.33c7d856.js"><link rel="prefetch" href="/assets/js/67.6d9b7cc8.js"><link rel="prefetch" href="/assets/js/68.63f4486e.js"><link rel="prefetch" href="/assets/js/69.fd717229.js"><link rel="prefetch" href="/assets/js/7.05321aa0.js"><link rel="prefetch" href="/assets/js/70.b37bad49.js"><link rel="prefetch" href="/assets/js/71.bf0f14a3.js"><link rel="prefetch" href="/assets/js/72.37e36450.js"><link rel="prefetch" href="/assets/js/73.d6b8cf7a.js"><link rel="prefetch" href="/assets/js/74.66cae9eb.js"><link rel="prefetch" href="/assets/js/75.f56a19ed.js"><link rel="prefetch" href="/assets/js/76.e9d0a86e.js"><link rel="prefetch" href="/assets/js/77.6f880a29.js"><link rel="prefetch" href="/assets/js/78.bd4f38f3.js"><link rel="prefetch" href="/assets/js/79.f22e09a9.js"><link rel="prefetch" href="/assets/js/8.58ff24c5.js"><link rel="prefetch" href="/assets/js/80.c7a75ffd.js"><link rel="prefetch" href="/assets/js/81.60c66414.js"><link rel="prefetch" href="/assets/js/82.1cac8d03.js"><link rel="prefetch" href="/assets/js/83.dca1d99b.js"><link rel="prefetch" href="/assets/js/84.8c41ec82.js"><link rel="prefetch" href="/assets/js/85.af3896bc.js"><link rel="prefetch" href="/assets/js/86.b30b6900.js"><link rel="prefetch" href="/assets/js/87.b51ef412.js"><link rel="prefetch" href="/assets/js/88.d3803962.js"><link rel="prefetch" href="/assets/js/89.7d9cb78b.js"><link rel="prefetch" href="/assets/js/9.40722af3.js"><link rel="prefetch" href="/assets/js/90.31875659.js"><link rel="prefetch" href="/assets/js/91.6be253a0.js"><link rel="prefetch" href="/assets/js/92.db3fd2c0.js"><link rel="prefetch" href="/assets/js/93.0eae35a1.js"><link rel="prefetch" href="/assets/js/94.3068fcfa.js"><link rel="prefetch" href="/assets/js/95.0aa43f4e.js"><link rel="prefetch" href="/assets/js/96.5dd378f0.js"><link rel="prefetch" href="/assets/js/97.f475d7a5.js"><link rel="prefetch" href="/assets/js/98.c7b425d3.js"><link rel="prefetch" href="/assets/js/99.91630bf2.js">
    <link rel="stylesheet" href="/assets/css/0.styles.15972595.css">
  </head>
  <body class="theme-mode-light">
    <div id="app" data-server-rendered="true"><div class="theme-container sidebar-open have-rightmenu have-body-img"><header class="navbar blur"><div title="目录" class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><img src="/img/logo.png" alt="仲灏小栈" class="logo"> <span class="site-name can-hide">仲灏小栈</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <div class="sidebar-hover-trigger"></div> <aside class="sidebar" style="display:none;"><div class="blogger"><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/site-data/avatar/avatar-wx.jpg"> <div class="blogger-info"><h3>仲灏</h3> <span>诚意, 正心, 格物, 致知</span></div></div> <nav class="nav-links"><div class="nav-item"><a href="/" class="nav-link">首页</a></div><div class="nav-item"><a href="/web/" class="nav-link">大前端</a></div><div class="nav-item"><a href="/backend-opt/" class="nav-link">后端&amp;运维</a></div><div class="nav-item"><a href="/other-tech/" class="nav-link">其他</a></div><div class="nav-item"><a href="/tech-live/" class="nav-link">生活</a></div><div class="nav-item"><a href="/about/" class="nav-link">关于我</a></div><div class="nav-item"><a href="/favorite/" class="nav-link">收藏</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="索引" class="dropdown-title"><a href="/archives/" class="link-title">索引</a> <span class="title" style="display:none;">索引</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/categories/" class="nav-link">分类</a></li><li class="dropdown-item"><!----> <a href="/tags/" class="nav-link">标签</a></li><li class="dropdown-item"><!----> <a href="/archives/" class="nav-link">归档</a></li></ul></div></div> <a href="https://github.com/izhaong" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>HTML&amp;CSS</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>JavaScript</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Node</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>Vue</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/pages/d36e75/" class="sidebar-link">持久化存储实时读取</a></li><li><a href="/pages/e3bb47/" class="sidebar-link">vue自适应布局</a></li><li><a href="/pages/3de341/" class="sidebar-link">Vue 中后台表格的增删改查同一解决方案(组件封装版)</a></li><li><a href="/pages/b97f0c/" class="sidebar-link">Vue Render自定义table单元格内容</a></li><li><a href="/pages/479249/" class="sidebar-link">项目初始化编码规范(eslint,prettier等)</a></li><li><a href="/pages/037c03/" class="sidebar-link">vue element-ui 换肤功能开发</a></li><li><a href="/pages/5ae239/" aria-current="page" class="active sidebar-link">vue element 定义多种主题实现换肤</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/5ae239/#结果图" class="sidebar-link">结果图</a></li><li class="sidebar-sub-header"><a href="/pages/5ae239/#安装依赖" class="sidebar-link">安装依赖</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/pages/5ae239/#配置element-theme" class="sidebar-link">配置element-theme</a></li><li class="sidebar-sub-header"><a href="/pages/5ae239/#配置gulp" class="sidebar-link">配置gulp</a></li></ul></li></ul></li><li><a href="/pages/cb8f80/" class="sidebar-link">el-upload 自定义上传进度</a></li><li><a href="/pages/a00f46/" class="sidebar-link">vue3初学注意点</a></li><li><a href="/pages/66bb43/" class="sidebar-link">vue3 hooks 自适应可视化大屏</a></li><li><a href="/pages/b533ef/" class="sidebar-link">vue3 element-plus ant- design 自定义主题</a></li><li><a href="/pages/e3d23f/" class="sidebar-link">vue2中使用jsx</a></li></ul></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>React</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>小程序</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>跨端</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>Electron</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>浏览器</span> <span class="arrow right"></span></p> <!----></section></li><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading"><span>其他</span> <span class="arrow right"></span></p> <!----></section></li></ul> </aside> <div><main class="page"><div class="theme-vdoing-wrapper "><div class="articleInfo-wrap" data-v-0c557b5e><div class="articleInfo" data-v-0c557b5e><ul class="breadcrumbs" data-v-0c557b5e><li data-v-0c557b5e><a href="/" title="首页" class="iconfont icon-home router-link-active" data-v-0c557b5e></a></li> <li data-v-0c557b5e><a href="/web/#大前端" data-v-0c557b5e>大前端</a></li><li data-v-0c557b5e><a href="/web/#Vue" data-v-0c557b5e>Vue</a></li></ul> <div class="info" data-v-0c557b5e><div title="作者" class="author iconfont icon-touxiang" data-v-0c557b5e><a href="https://github.com/izhaong" target="_blank" title="作者" class="beLink" data-v-0c557b5e>仲灏</a></div> <div title="创建时间" class="date iconfont icon-riqi" data-v-0c557b5e><a href="javascript:;" data-v-0c557b5e>2022-01-13</a></div> <!----></div></div></div> <!----> <div class="content-wrapper"><div class="right-menu-wrapper"><div class="right-menu-margin"><div class="right-menu-content"></div></div></div> <h1><img src="">vue element 定义多种主题实现换肤<!----></h1> <!----> <div class="theme-vdoing-content content__default"><h2 id="结果图"><a href="#结果图" class="header-anchor">#</a> 结果图</h2> <p><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/014021.vue%20element%20%E5%AE%9A%E4%B9%89%E5%A4%9A%E7%A7%8D%E4%B8%BB%E9%A2%98%E5%AE%9E%E7%8E%B0%E6%8D%A2%E8%82%A4/2022/01/13/17-34-54-284b4a74669ebcb44c43df766cad4b27-image-20220113173450084-bd2066.png" alt="image-20220113173450084"></p> <p><img src="https://cdn.jsdelivr.net/gh/izhaong/izhaong.com-oss/blogImg/014021.vue%20element%20%E5%AE%9A%E4%B9%89%E5%A4%9A%E7%A7%8D%E4%B8%BB%E9%A2%98%E5%AE%9E%E7%8E%B0%E6%8D%A2%E8%82%A4/2022/01/13/17-36-07-15a947900529dd7cbaac2245e8bd0519-image-20220113173558775-94992b.png" alt="image-20220113173558775"></p> <h2 id="安装依赖"><a href="#安装依赖" class="header-anchor">#</a> 安装依赖</h2> <p>package.json</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  ...
  <span class="token property">&quot;dependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    ...
    <span class="token property">&quot;element-ui&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.13.2&quot;</span><span class="token punctuation">,</span>
    ...
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token property">&quot;devDependencies&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    ...
    <span class="token property">&quot;element-theme&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.1&quot;</span><span class="token punctuation">,</span>
  	<span class="token property">&quot;element-theme-chalk&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.13.2&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;gulp-autoprefixer&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^7.0.1&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;gulp-clean-css&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.3.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;gulp-load-plugins&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.3&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;gulp-rename&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^2.0.0&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;gulp-sass&quot;</span><span class="token operator">:</span> <span class="token string">&quot;^4.1.0&quot;</span><span class="token punctuation">,</span>
    ...
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  ...
<span class="token punctuation">}</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br></div></div><p><strong>gulp3 需要搭配 node10使用</strong></p> <h3 id="配置element-theme"><a href="#配置element-theme" class="header-anchor">#</a> 配置element-theme</h3> <p>/package.json</p> <div class="language-json line-numbers-mode"><pre class="language-json"><code><span class="token punctuation">{</span>
  ...
  <span class="token property">&quot;element-theme&quot;</span><span class="token operator">:</span> <span class="token punctuation">{</span>
    <span class="token property">&quot;config&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./src/element-ui/theme-variables.scss&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;out&quot;</span><span class="token operator">:</span> <span class="token string">&quot;./src/element-ui/theme&quot;</span><span class="token punctuation">,</span>
    <span class="token property">&quot;minimize&quot;</span><span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
    <span class="token property">&quot;browsers&quot;</span><span class="token operator">:</span> <span class="token punctuation">[</span>
      <span class="token string">&quot;&gt; 1%&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;last 2 versions&quot;</span><span class="token punctuation">,</span>
      <span class="token string">&quot;not ie &lt;= 10&quot;</span>
    <span class="token punctuation">]</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
  ...
<span class="token punctuation">}</span>
</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br></div></div><h3 id="配置gulp"><a href="#配置gulp" class="header-anchor">#</a> 配置gulp</h3> <p>/gulpfile.js</p> <div class="language-js line-numbers-mode"><pre class="language-js"><code><span class="token keyword">var</span> gulp <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp'</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> $ <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'gulp-load-plugins'</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> fs <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'fs'</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> path <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'path'</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> del <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'del'</span><span class="token punctuation">)</span>
<span class="token comment">//var colors = require('colors')</span>
<span class="token keyword">var</span> child_process <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'child_process'</span><span class="token punctuation">)</span>

<span class="token keyword">var</span> theme <span class="token operator">=</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
<span class="token keyword">var</span> themeList <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./src/element-ui/config.js'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">filter</span><span class="token punctuation">(</span><span class="token parameter">item</span> <span class="token operator">=&gt;</span> <span class="token operator">!</span>item<span class="token punctuation">.</span>hasBuild<span class="token punctuation">)</span>
<span class="token keyword">var</span> styleFileDir <span class="token operator">=</span> <span class="token string">'./src/assets/scss'</span>
<span class="token keyword">var</span> styleFileDirTemp <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styleFileDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">-temp</span><span class="token template-punctuation string">`</span></span>
<span class="token keyword">var</span> themeFileDir <span class="token operator">=</span> <span class="token string">'./public/element-theme'</span>
<span class="token keyword">var</span> et <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'element-theme'</span><span class="token punctuation">)</span>
<span class="token keyword">var</span> etOptions <span class="token operator">=</span> <span class="token function">require</span><span class="token punctuation">(</span><span class="token string">'./package.json'</span><span class="token punctuation">)</span><span class="token punctuation">[</span><span class="token string">'element-theme'</span><span class="token punctuation">]</span>
<span class="token keyword">var</span> themeFileName <span class="token operator">=</span> etOptions<span class="token punctuation">.</span>config<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">.*\/(.+\.scss)</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span> <span class="token string">'$1'</span><span class="token punctuation">)</span>

<span class="token comment">/**
 * 构建生成主题
 */</span>
gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'themes'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">if</span> <span class="token punctuation">(</span>themeList<span class="token punctuation">.</span>length <span class="token operator">&lt;=</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token function">del</span><span class="token punctuation">(</span>styleFileDirTemp<span class="token punctuation">)</span>
  <span class="token punctuation">}</span>

  <span class="token comment">// 删除临时文件，保证本次操作正常执行</span>
  <span class="token comment">//del(styleFileDirTemp)</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'del(styleFileDirTemp)'</span><span class="token punctuation">)</span>

  <span class="token comment">// 拷贝一份scss样式文件夹，作为构建的临时处理文件夹</span>
  <span class="token comment">//child_process.spawnSync('cp', ['-r', styleFileDir, styleFileDirTemp])</span>
  console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'copy styleFileDirTemp'</span><span class="token punctuation">)</span>

  <span class="token comment">// 拷贝element组件scss变量样式文件至临时处理文件夹中，并修改相应配置信息</span>
  <span class="token comment">//child_process.spawnSync('cp', ['-r', etOptions.config, styleFileDirTemp])</span>
  etOptions<span class="token punctuation">.</span>config <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styleFileDirTemp<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>

  <span class="token comment">// 开始构建生成</span>
  <span class="token function">fnCreate</span><span class="token punctuation">(</span>themeList<span class="token punctuation">)</span>

  <span class="token keyword">function</span> <span class="token function">fnCreate</span><span class="token punctuation">(</span><span class="token parameter">themeList</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">if</span> <span class="token punctuation">(</span>themeList<span class="token punctuation">.</span>length <span class="token operator">&gt;=</span> <span class="token number">1</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// 保存当前构建生成的主题对象</span>
      theme <span class="token operator">=</span> themeList<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span>

      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-------------------- 待构建，主题 -------------------------'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>themeList<span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-------------------- 构建中，主题 -------------------------'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>theme<span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>

      <span class="token comment">// 修改.scss临时文件中的$--color-primary主题变量值</span>
      <span class="token keyword">var</span> data <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span>etOptions<span class="token punctuation">.</span>config<span class="token punctuation">,</span> <span class="token string">'utf8'</span><span class="token punctuation">)</span>
      <span class="token keyword">var</span> result <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>
        <span class="token regex"><span class="token regex-delimiter">/</span><span class="token regex-source language-regex">\$--color-primary:(.*) !default;</span><span class="token regex-delimiter">/</span></span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">$--color-primary:</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>theme<span class="token punctuation">.</span>color<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> !default;</span><span class="token template-punctuation string">`</span></span>
      <span class="token punctuation">)</span>
      fs<span class="token punctuation">.</span><span class="token function">writeFileSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span>etOptions<span class="token punctuation">.</span>config<span class="token punctuation">)</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span>

      <span class="token comment">// 修改aui.scss临时文件中引入element组件主题变量文件路径</span>
      <span class="token keyword">var</span> data <span class="token operator">=</span> fs<span class="token punctuation">.</span><span class="token function">readFileSync</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styleFileDirTemp<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/aui.scss</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span> <span class="token string">'utf8'</span><span class="token punctuation">)</span>
      <span class="token keyword">var</span> result <span class="token operator">=</span> data<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span><span class="token keyword">new</span> <span class="token class-name">RegExp</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">(@import \&quot;)(.*\/)(</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileName<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">\&quot;;)</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">'$1./$3'</span><span class="token punctuation">)</span>
      fs<span class="token punctuation">.</span><span class="token function">writeFileSync</span><span class="token punctuation">(</span>path<span class="token punctuation">.</span><span class="token function">resolve</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styleFileDirTemp<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/aui.scss</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span> result<span class="token punctuation">)</span>

      <span class="token comment">// 调用element-theme插件，生成element组件主题</span>
      etOptions<span class="token punctuation">.</span>out <span class="token operator">=</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>theme<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span>
      et<span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span>etOptions<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// 生成后，构建同主题色aui.css项目主题</span>
        gulp<span class="token punctuation">.</span><span class="token function">start</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'styles'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          <span class="token comment">// 递归下一步</span>
          themeList<span class="token punctuation">.</span><span class="token function">splice</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">1</span><span class="token punctuation">)</span>
          <span class="token function">fnCreate</span><span class="token punctuation">(</span>themeList<span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span> <span class="token keyword">else</span> <span class="token punctuation">{</span>
      <span class="token comment">// 删除临时文件</span>
      <span class="token function">del</span><span class="token punctuation">(</span>styleFileDirTemp<span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-------------------- 构建完毕，删除临时文件 -------------------------'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>styleFileDirTemp<span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>

      <span class="token comment">// 删除主题不需要的部分文件</span>
      <span class="token keyword">var</span> files <span class="token operator">=</span> <span class="token punctuation">[</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/**/*.css</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">!</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/**/index.css</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">!</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/**/aui.css</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
        <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">!</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/**/fonts</span><span class="token template-punctuation string">`</span></span>
      <span class="token punctuation">]</span>
      <span class="token function">del</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'-------------------- 构建完毕，删除主题独立组件文件 -------------------------'</span><span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>files<span class="token punctuation">)</span>
      console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">'\n'</span><span class="token punctuation">)</span>
    <span class="token punctuation">}</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

gulp<span class="token punctuation">.</span><span class="token function">task</span><span class="token punctuation">(</span><span class="token string">'styles'</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
  <span class="token keyword">return</span> gulp
    <span class="token punctuation">.</span><span class="token function">src</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>styleFileDirTemp<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/aui.scss</span><span class="token template-punctuation string">`</span></span><span class="token punctuation">]</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">sass</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'error'</span><span class="token punctuation">,</span> $<span class="token punctuation">.</span>sass<span class="token punctuation">.</span>logError<span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>
      $<span class="token punctuation">.</span><span class="token function">autoprefixer</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
        browsers<span class="token operator">:</span> etOptions<span class="token punctuation">.</span>browsers<span class="token punctuation">,</span>
        cascade<span class="token operator">:</span> <span class="token boolean">false</span>
      <span class="token punctuation">}</span><span class="token punctuation">)</span>
    <span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">cleanCss</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>$<span class="token punctuation">.</span><span class="token function">rename</span><span class="token punctuation">(</span><span class="token string">'aui.css'</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
    <span class="token punctuation">.</span><span class="token function">pipe</span><span class="token punctuation">(</span>gulp<span class="token punctuation">.</span><span class="token function">dest</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>themeFileDir<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">/</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>theme<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>

</code></pre> <div class="line-numbers-wrapper"><span class="line-number">1</span><br><span class="line-number">2</span><br><span class="line-number">3</span><br><span class="line-number">4</span><br><span class="line-number">5</span><br><span class="line-number">6</span><br><span class="line-number">7</span><br><span class="line-number">8</span><br><span class="line-number">9</span><br><span class="line-number">10</span><br><span class="line-number">11</span><br><span class="line-number">12</span><br><span class="line-number">13</span><br><span class="line-number">14</span><br><span class="line-number">15</span><br><span class="line-number">16</span><br><span class="line-number">17</span><br><span class="line-number">18</span><br><span class="line-number">19</span><br><span class="line-number">20</span><br><span class="line-number">21</span><br><span class="line-number">22</span><br><span class="line-number">23</span><br><span class="line-number">24</span><br><span class="line-number">25</span><br><span class="line-number">26</span><br><span class="line-number">27</span><br><span class="line-number">28</span><br><span class="line-number">29</span><br><span class="line-number">30</span><br><span class="line-number">31</span><br><span class="line-number">32</span><br><span class="line-number">33</span><br><span class="line-number">34</span><br><span class="line-number">35</span><br><span class="line-number">36</span><br><span class="line-number">37</span><br><span class="line-number">38</span><br><span class="line-number">39</span><br><span class="line-number">40</span><br><span class="line-number">41</span><br><span class="line-number">42</span><br><span class="line-number">43</span><br><span class="line-number">44</span><br><span class="line-number">45</span><br><span class="line-number">46</span><br><span class="line-number">47</span><br><span class="line-number">48</span><br><span class="line-number">49</span><br><span class="line-number">50</span><br><span class="line-number">51</span><br><span class="line-number">52</span><br><span class="line-number">53</span><br><span class="line-number">54</span><br><span class="line-number">55</span><br><span class="line-number">56</span><br><span class="line-number">57</span><br><span class="line-number">58</span><br><span class="line-number">59</span><br><span class="line-number">60</span><br><span class="line-number">61</span><br><span class="line-number">62</span><br><span class="line-number">63</span><br><span class="line-number">64</span><br><span class="line-number">65</span><br><span class="line-number">66</span><br><span class="line-number">67</span><br><span class="line-number">68</span><br><span class="line-number">69</span><br><span class="line-number">70</span><br><span class="line-number">71</span><br><span class="line-number">72</span><br><span class="line-number">73</span><br><span class="line-number">74</span><br><span class="line-number">75</span><br><span class="line-number">76</span><br><span class="line-number">77</span><br><span class="line-number">78</span><br><span class="line-number">79</span><br><span class="line-number">80</span><br><span class="line-number">81</span><br><span class="line-number">82</span><br><span class="line-number">83</span><br><span class="line-number">84</span><br><span class="line-number">85</span><br><span class="line-number">86</span><br><span class="line-number">87</span><br><span class="line-number">88</span><br><span class="line-number">89</span><br><span class="line-number">90</span><br><span class="line-number">91</span><br><span class="line-number">92</span><br><span class="line-number">93</span><br><span class="line-number">94</span><br><span class="line-number">95</span><br><span class="line-number">96</span><br><span class="line-number">97</span><br><span class="line-number">98</span><br><span class="line-number">99</span><br><span class="line-number">100</span><br><span class="line-number">101</span><br><span class="line-number">102</span><br><span class="line-number">103</span><br><span class="line-number">104</span><br><span class="line-number">105</span><br><span class="line-number">106</span><br><span class="line-number">107</span><br><span class="line-number">108</span><br><span class="line-number">109</span><br><span class="line-number">110</span><br><span class="line-number">111</span><br><span class="line-number">112</span><br><span class="line-number">113</span><br><span class="line-number">114</span><br></div></div></div></div> <!----> <div class="page-edit"><!----> <!----> <div class="last-updated"><span class="prefix">上次更新:</span> <span class="time">2022/01/21, 15:51:34</span></div></div> <div class="page-nav-wapper"><div class="page-nav-centre-wrap"><a href="/pages/037c03/" class="page-nav-centre page-nav-centre-prev"><div class="tooltip">vue element-ui 换肤功能开发</div></a> <a href="/pages/cb8f80/" class="page-nav-centre page-nav-centre-next"><div class="tooltip">el-upload 自定义上传进度</div></a></div> <div class="page-nav"><p class="inner"><span class="prev">
        ←
        <a href="/pages/037c03/" class="prev">vue element-ui 换肤功能开发</a></span> <span class="next"><a href="/pages/cb8f80/">el-upload 自定义上传进度</a>→
      </span></p></div></div></div> <div class="article-list"><div class="article-title"><a href="/archives/" class="iconfont icon-bi">最近更新</a></div> <div class="article-wrapper"><dl><dd>01</dd> <dt><a href="/pages/749ce2/"><div>
            css 变量使用
            <!----></div></a> <span class="date">01-26</span></dt></dl><dl><dd>02</dd> <dt><a href="/pages/9ee936/"><div>
            js 精准和模糊获取dom
            <!----></div></a> <span class="date">01-26</span></dt></dl><dl><dd>03</dd> <dt><a href="/pages/2a8bd5/"><div>
            在 Javascript 和 Sass（或 CSS！）之间共享变量的方法
            <!----></div></a> <span class="date">01-25</span></dt></dl> <dl><dd></dd> <dt><a href="/archives/" class="more">更多文章&gt;</a></dt></dl></div></div></main></div> <div class="footer"><div class="icons"><a href="mailto:izhaong@outlook.com" title="发邮件" target="_blank" class="iconfont icon-youjian"></a><a href="https://github.com/izhaong" title="GitHub" target="_blank" class="iconfont icon-github"></a><a href="https://music.163.com/#/playlist?id=755597173" title="听音乐" target="_blank" class="iconfont icon-erji"></a></div> 
  Theme by
  <a href="https://github.com/xugaoyi/vuepress-theme-vdoing" target="_blank" title="本站主题">Vdoing</a> 
    | Copyright © 2021-2022
    <span>izhaong | <a href="https://github.com/izhaong" target="_blank">github</a> | <a href="http://beian.miit.gov.cn/" target="_blank">蜀ICP备2021031194号</a></span></div> <div class="buttons"><div title="返回顶部" class="button blur go-to-top iconfont icon-fanhuidingbu" style="display:none;"></div> <div title="去评论" class="button blur go-to-comment iconfont icon-pinglun" style="display:none;"></div> <div title="主题模式" class="button blur theme-mode-but iconfont icon-zhuti"><ul class="select-box" style="display:none;"><li class="iconfont icon-zidong">
          跟随系统
        </li><li class="iconfont icon-rijianmoshi">
          浅色模式
        </li><li class="iconfont icon-yejianmoshi">
          深色模式
        </li><li class="iconfont icon-yuedu">
          阅读模式
        </li></ul></div></div> <div class="body-bg" style="background:url() center center / cover no-repeat;opacity:0.5;"></div> <!----> <!----></div><div class="global-ui"><div></div></div></div>
    <script src="/assets/js/app.2005d9cf.js" defer></script><script src="/assets/js/2.26fadcea.js" defer></script><script src="/assets/js/41.644d2886.js" defer></script>
  </body>
</html>
